<template>
<div>
    <div id="nav">
    <nav>
        <!-- :src=" res.data.data.data[0].pichead" -->
        
        <div class="i">
        <img  src="https://image.juooo.com/group1/M00/00/02/rBAAI19XUwCAMM2fAACX3iQYe5s860.jpg"  alt="">
        </div>
        <div v-if="show" class="h">
            <div>
            <h3 @click="goLogin">登录</h3>/<h3 @click="goReg">注册</h3>
            </div>
            <span>请点击登录</span>
        </div>
        <div v-else class="hd">
            <h3>{{ value }}</h3>
            <h1 @click="remove">退出登录</h1>
        </div>
        <div class="p">
            <p>普通会员</p>
        </div>
    </nav>
    </div>
    <van-grid direction="horizontal" :column-num="4" id="box">
        <van-grid-item class="c" icon="photo-o">
             <p>0</p>
            <h4>账户余额</h4>
        </van-grid-item>
        <van-grid-item class="c" icon="photo-o">
             <p>0</p>
            <h4>积分</h4>
        </van-grid-item>
        <van-grid-item class="c" icon="photo-o">
             <p>0</p>
            <h4>优惠券</h4>
        </van-grid-item>
        <van-grid-item class="c" icon="photo-o" @click="go">
            <p>立即开通&nbsp;橙PUSH卡</p>
            <h4></h4>
        </van-grid-item>
    </van-grid>
    <div id="box2">
        <div class="i1">
            <img src="../../assets/img/2.png" alt="">
        </div>
    </div>
     <van-grid direction="horizontal" :column-num="3" id="box3">
        <van-grid-item class="c2" icon="photo-o">
              <p>
                 <img src="../../assets/img/7.png" alt="">
             </p>
            <h4>我的订单</h4>
        </van-grid-item>
        <van-grid-item class="c2" icon="photo-o">
               <p>
                 <img src="../../assets/img/8.png" alt="">
             </p>
            <h4>我的票价</h4>
        </van-grid-item>
        <van-grid-item class="c2" icon="photo-o">
              <p>
                 <img src="../../assets/img/9.png" alt="">
             </p>
            <h4>我的卡包</h4>
        </van-grid-item>
    </van-grid>
     <van-grid direction="horizontal" :column-num="4" id="box4">
        <van-grid-item class="c3" icon="photo-o">
             <p>
                 <img src="../../assets/img/10.png" alt="">
             </p>
            <h4>实名购票人</h4>
        </van-grid-item>
        <van-grid-item class="c3" icon="photo-o">
              <p>
                 <img src="../../assets/img/11.png" alt="">
             </p>
            <h4>收货地址</h4>
        </van-grid-item>
        <van-grid-item class="c3" icon="photo-o">
               <p>
                 <img src="../../assets/img/12.png" alt="">
             </p>
            <h4>意见反馈</h4>
        </van-grid-item>
        <van-grid-item class="c3" icon="photo-o">
              <p>
                 <img src="../../assets/img/13.png" alt="">
             </p>
            <h4>客服帮忙</h4>
        </van-grid-item>
    </van-grid>
</div>
</template>

<script>
import Vue from 'vue'
import { Grid, GridItem } from 'vant';
import store from '../../store'
Vue.use(Grid);
Vue.use(GridItem);
export default {
 data () {
return {
    show:false,
    value:'',
}
 },
 mounted () {
    if( store.state.token){
        this.show = false
    }else{
        this.show = true;
    }
    this.value =JSON.parse(localStorage.getItem('getRes')) 
},
methods:{
    goLogin(){
         this.$router.push({path:'/login'})
    },
    goReg(){
         this.$router.push({path:'/reg'})
    },
    go(){
        this.$router.push({path:'/openPlus'})
    },
    remove(){
        localStorage.removeItem('getRes');
        sessionStorage.removeItem('token')
        window.location.reload()
    }
}
    
}
</script>

<style scoped lang='scss'>
#box2{
    width:98%;
    height:20%;
    img{
        width:100%;
        height:100%
    }
}
#box{
    height: 0.60rem;
    position: absolute;
    top: 3.4rem; left: 0.4rem;
}
.c{
    width:1.65rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
#nav{
    height: 4.58667rem;
    background: url(../../assets/img/1.png) no-repeat top center;
    background-size: 100%;
    position: relative;
    overflow: hidden;
}
nav{
  background: #fff;
    -webkit-box-shadow: 0px 0.05333rem 0.4rem 0.02667rem rgba(35,35,35,0.08);
    box-shadow: 0px 0.05333rem 0.4rem 0.02667rem rgba(35,35,35,0.08);
    border-radius: 0.10667rem;
    margin: 1.53333rem 0.4rem 0;
    position: relative;
    height: 56%;
    display: flex;
    justify-content: space-around;
}
    .i{
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    top:-0.75rem; left:.1rem;
    img{
        width:100%;
        height:100%;
    }
    }
    .h{
    display: flex;
    flex-direction: column;
    position: relative;
    top:0rem; left:0.7rem;
    }
      .h div{
    display: flex;
    flex-direction: row;

    }
    .p{
    position: relative;
    bottom:-1rem; right:-0.9rem;
    float: right;
    font-size: 0.27333rem;
    color: #454341;
    font-weight: bold;
    height:0.30rem;
    padding: 0.09333rem 0.28rem 0.09333rem 0.38667rem;
    // background: #666;
    border-radius: 0.36rem 0px 0px 0.36rem;
    }
    .c p{
        margin-right:.1rem ;
    }
    #box3{
    width:90%;
    // height:30%;
    margin-left: 0.50rem;
}
    #box4{
    width:90%;
    margin-left: 0.50rem;
    
    }
    .c2{
    height:1.50rem;
    margin-bottom: 0.50rem;
    margin-top: 0.20rem;
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: space-between;
    }
    .c3{
    height:1.50rem;
  
    } 
    /deep/ .van-grid-item__content{
     display: flex;
    justify-content: space-around;
    flex-direction: column;
    } 
    .c3 p{
    width: 0.88rem;
    height: 0.88rem;
    }
    .c3 p img{
        width:100%;
        height:100%
    }
       .c2 p{
    width: 0.88rem;
    height: 0.88rem;
    }
    .c2 p img{
        width:100%;
        height:100%
    }
    .hd{
        color:#000;
        margin-left: .6rem;
    }
    h1{
        // float:right;
        position:absolute;
        left:76%; top:0;      
    }
</style>
